<template>
  <div class="box">
    <Lyric ref="Lyric" :song-time="songTime" :song-name="songName" />
    <!-- 歌词弹层 -->
    <!-- <Lyric v-show="showDialog" /> -->
    <!-- 左边工具栏 -->
    <div class="left">
      <div class="songimage">
        <img :src="songImage" alt="#">
      </div>
      <div class="songname">
        {{ songName }}
        <br>
        <span class="artist">
          {{ author }}
        </span>
      </div>
      <!-- <div class="like">
        <span class="iconfont icon-aixin" />
      </div> -->
    </div>
    <!-- 右边工具栏 -->
    <div class="right">
      <span class="iconfont icon-yinleliebiao" title="播放列表" />
      <span class="iconfont icon-danqubofang" title="单曲循环" />
      <span class="iconfont icon-suijibofang" title="随机播放" />
      <span class="iconfont icon-shangjiantou" title="歌词" @click="fx" />
    </div>
    <!-- <button @click="getSong('33894312')">点击获取歌曲</button> -->
    <audio-player
      ref="audioPlayer"
      :audio-list="audioList.map((elm) => elm.url)"
      :before-play="handleBeforePlay"
      theme-color="black"
      @playing="ProgressMove"
    />
  </div>
</template>

<script>
import Utils from '../../assets/js/u.js'
import AudioPlayer from '@liripeng/vue-audio-player'
import '@liripeng/vue-audio-player/lib/vue-audio-player.css'
import '@/font/font-Tm/iconfont.css' // 字体图标
import { SongUrlAPI, SongDetailsAPI } from '@/api/AudioPlayer.js'
import Lyric from './components/lyric.vue'
// import bus from '../../assets/eventBu'
export default {
  components: {
    AudioPlayer,
    Lyric
  },
  data() {
    return {
      currentAudioName: '',
      audioList: [
        {
          name: '',
          url: ''
        }
      ],
      songUrl: [],
      songUrl2: [],
      author: '',
      songImage: '',
      songTime: 0, // 当前歌曲播放到的时间点
      songName: '',
      songId: ''
    }
  },
  mounted() {
    Utils.$on('demo', (msg) => {
      // console.log(msg + '')
      // var a = toString(msg)
      // console.log(a)
      this.getSong(msg + '')
    })
  },
  created() {
    // 调用组件时请解开下面三行代码
    // this.audioList = JSON.parse(localStorage.getItem('songlist')) // 初始化时从本地存储取歌曲URL
    // this.author = localStorage.getItem('author')
    // this.songImage = localStorage.getItem('image')

    // 调用组件时请解开下面三行代码
    this.audioList = JSON.parse(localStorage.getItem('songlist')) // 初始化时从本地存储取歌曲URL
    this.author = localStorage.getItem('author')
    this.songImage = localStorage.getItem('image')
  },
  methods: {
    async getSong(id) {
      // 传入音乐ID，调用播放组件
      const { data } = await SongUrlAPI(id)
      console.log(id)
      console.log(data)
      for (var key in data) {
        this.songUrl.push(key, data[key])
      }
      console.log(+new Date())
      // console.log(this.songUrl)
      this.songUrl = this.songUrl[1]
      // console.log(this.songUrl)
      this.songUrl.forEach((data) => {
        // console.log(data)
        this.songUrl2.push(data)
      })
      console.log(this.songUrl2) // 拿到音乐播放地址
      this.audioList = this.songUrl2
      // console.log(this.audioList)
      localStorage.setItem('songlist', JSON.stringify(this.audioList)) // 持久化
      const {
        data: { songs }
      } = await SongDetailsAPI(id)
      // console.log(songs[0].al.picUrl)
      localStorage.setItem('image', songs[0].al.picUrl)
      this.songName = songs[0].name
      localStorage.setItem('author', songs[0].ar[0].name)
      this.songId = this.songUrl2[0].id
      this.$refs.Lyric.fn(this.songId)
    },
    handleBeforePlay(next) {
      // this.currentAudioName = this.audioList[this.$refs.audioPlayer.currentPlayIndex].name
      next() // 开始播放
    },
    ProgressMove() {
      // console.log(this.$refs.audioPlayer.currentTime)
      this.songTime = Math.round(this.$refs.audioPlayer.currentTime * 100) / 100
    },
    fx(id) {
      // 调用歌词组件
      this.$refs.Lyric.dialogVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .audio-player .audio__progress-point:after {
  display: none;
}
/deep/ .audio-player .audio__progress-point {
  // 修改进度条按钮
  background-color: #335eea !important;
  display: none;
}
/deep/ .audio__progress {
  background-color: #335eea !important;
}
.box {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  border: 1px solid hsla(0, 0%, 50.2%, 0.18);
  padding-top: 2px;
}

.left {
  width: 323px;
  display: flex;
  float: left;
  padding-left: 5%;
  // background-color: pink;
  .songimage {
    flex: 1;
    width: 46px;
    height: 46px;
    border-radius: 3px;
    overflow: hidden;
    cursor: pointer;
    img {
      width: 46px;
      height: 46px;
    }
  }
  .songname {
    flex: 3;
    font-size: 16px;
    font-weight: 600;
    padding-top: 4px;
    padding-left: 3px;
    cursor: pointer;
    .artist {
      font-size: 12px;
      color: gray;
    }
  }
  .like {
    flex: 1;
    line-height: 46px;
    cursor: pointer;
  }
}
.right {
  display: flex;
  width: 323px;
  float: right;
  // background-color: skyblue;
  text-align: center;
  line-height: 46px;
  padding-right: 5%;
  span {
    flex: 1;
    font-weight: 800;
    cursor: pointer;
  }
}
/deep/ .audio-player .audio__progress-wrap {
  height: 4px;
}
</style>>

